<template>
    <div
        class="product-show">
        <div class="product-coverpicture">
            <van-image
                :width="getSquareHeightByWidth()"
                :height="getSquareHeightByWidth()"
                :src="getCoverpicture(product.detail)">
            </van-image>
        </div>
        <div class="product-basic-info">

            <div class="product-name">
                <span>{{ product.detail.name }}</span>
            </div>
            <div class="product-model">
                <wp-icon
                    name="model"
                    size="16" />
                {{ $t('chan-pin-xing-hao') }} {{ product.detail && product.detail.model }}
            </div>
            <div class="product-description">
                {{ product.detail.description }}
            </div>
        </div>
        <div class="seperate-line"></div>
        <div class="product-param">
            <div class="product-param-title">
                <wp-icon
                    name="Specifications"
                    size="16" /> {{ $t('gui-ge-can-shu') }}</div>
            <div class="product-param-list">
                <table>

                    <template
                        :key="index + child.name"
                        v-for="(child, index) in product.detail.params">
                        <tr
                            v-show="isCollpaseParamItem(index)"
                            v-if="child.name === 'param_title'"
                            class="param-title-value">
                            <td
                                colspan='2'
                                class="param-title">
                                {{ child.value }}
                            </td>
                        </tr>
                        <tr
                            v-else
                            v-show="isCollpaseParamItem(index)"
                            class="param-value-row">
                            <td class="param-name"> {{ child.name }} </td>
                            <td class="param-value"> {{ child.value }} </td>
                        </tr>
                    </template>
                </table>
            </div>
            <div
                class="collapse-btn"
                v-show="productstate.is_expand"
                @click="collpaseParam">
                {{ $t('zhe-die') }}
                <wp-icon name="arrow-up" />
            </div>
            <div
                class="expand-btn"
                v-show="isNeedCollpase() && (!productstate.is_expand) "
                @click="expandParam">
                {{ $t('zhan-kai') }}
                <wp-icon name="pulldown" />
            </div>
        </div>
        <div class="product-details">
            <div class="product-details-title">
                <wp-icon
                    name="a-productdetails"
                    size="16" /> {{ $t('chan-pin-xiang-qing') }}</div>
            <div class="product-details-list">
                <li
                    v-for="(child, index) in product.detail.detailpictures"
                    :key="index">
                    <img
                        :src="child.fileurl"
                        alt="">
                </li>
            </div>
        </div>
        <div
            class="product-attachment"
            v-show="isShowFiles()">
            <div class="product-attachment-title">
                <wp-icon
                    name="appendix"
                    size="16" /> {{ $t('chan-pin-fu-jian') }}</div>
            <div class="product-details-list">
                <file-bar
                    v-for="(child, index) in product.detail.files"
                    :key="index"
                    :file="child"/>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive } from 'vue';
import { useProductSetup } from '@/setup/product/ProductSetup';
import WpIcon from '@/components/_wp_components/WpIcon.vue';
import FileBar from '@/components/_common/FileBar.vue';

export default {
    components: {
        WpIcon,
        FileBar
    },
    props: {
        product: Object
    },
    setup (props, ctx) {
        const {
            getCoverpicture
        } = useProductSetup();

        const productstate = reactive({
            collapse_number: 10,
            is_expand: false
        });

        const expandParam = () => {
            productstate.is_expand = true;
        };
        const collpaseParam = () => {
            productstate.is_expand = false;
        };
        const isNeedCollpase = () => {
            if (props.product.detail && props.product.detail.params) {
                return productstate.collapse_number < props.product.detail.params.length;
            }
            return false;
        };
        const isShowFiles = () => {
            if (props.product.detail.files && props.product.detail.files.length > 0) {
                return true;
            }
            return false;
        };

        const getSquareHeightByWidth = () => {
            const width = document.body.clientWidth;
            return width + 'px';
        };

        const isCollpaseParamItem = (index) => {
            if (productstate.is_expand) {
                return true;
            }

            if (index + 1 < productstate.collapse_number) {
                return true;
            }

            return false;
        };

        return {
            getCoverpicture,
            getSquareHeightByWidth,
            isCollpaseParamItem,
            productstate,
            expandParam,
            collpaseParam,
            isNeedCollpase,
            isShowFiles
        };
    }
};
</script>

<style lang="scss" scoped>
.product-show{
    padding-bottom: 20px;
    background: #fff;
}
.product-coverpicture {
    img {
        width: 100%;
    }
}

.product-basic-info {
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    word-break: break-word;

    .product-name {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .product-model {
        font-size: 12px;
        margin-bottom: 10px;
        color: rgba(0, 0, 0, 0.6);
    }

    .product-description {
        font-size: 13px;
        color: rgba(0, 0, 0, 0.6);
    }
}

.collapse-btn {
    text-align: center;
    padding: 10px 0 0;
}

.expand-btn {
    text-align: center;
    padding: 10px 0 0;
}

.seperate-line {
    width: 100%;
    height: 1px;
    background: rgba(229, 229, 229, 1);
}

.product-param {
    padding: 15px;

    .product-param-title {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .product-param-list {
        table {
            width: 100%;
            border-collapse: collapse;
        }

        .param-title {
            color: #000;
            font-size: 13px;
            font-weight: 500;
        }

        td {
            font-size: 13px;
            padding: 10px;
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.60);
            border: 1px solid #e5e5e5;
        }

        .param-name {
            width: 36%;
            font-size: 13px;
            word-break: break-word;
        }

        .param-value {
            width: 64%;
            font-size: 13px;
            word-break: break-word;

        }
    }
}

.product-details-title {
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
}

.product-attachment{
    padding: 15px;
    .product-attachment-title {
        padding:  0;
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
    }
}
.product-details-list {
    li {
        list-style: none;
    }

    img {
        width: 100%;
    }
}
</style>
